import React, { Component } from 'react'
import './style.scss'
import NavTab from '@/components/navTab'
import WuIcon from '@/components/wuIcon'
import { List, InputItem, Toast, Button } from 'antd-mobile'
import { produce } from 'immer'
import cloneDeep from 'lodash/cloneDeep'
import connect from './connect'
import { setUserinfo } from '@/store/modules/user'
import { loginApi } from '@/service/userApi'

@connect
class Index extends Component {
  state = {
    username: {
      value: 'aaaa',
      error: false
    },
    password: {
      value: 'bbbb',
      error: false
    }
  }
  onErrorClick = name => {
    if (this.state[name].error) {
      Toast.info(`【${name}】 - 表单验证有误`, 3)
    }
  }
  onChange = (name, value) => {
    this.setState({
      [name]: {
        value,
        error: value.replace(/\s/g, '').length <= 2
      }
    })
  }
  doLogin = async () => {
    const state = cloneDeep(this.state)
    for (let key in state) {
      // 同步修改 -- 只是修改了数据，没有触发视图更新
      state[key].error = state[key].value.replace(/\s/g, '').length <= 2
      // 异步修改 -- 触发视图更新
      this.setState(
        produce(draft => {
          draft[key].error = draft[key].value.replace(/\s/g, '').length <= 2
        })
      )
    }
    if (Object.keys(state).some(key => state[key].error)) {
      Toast.info('表单验证有误', 3)
      return
    }

    // 表单项验证成功，可以提交表单 -- 没有返回，不能在登录是否成功后才进行跳转
    // console.log(this.state.username.value, this.state.password.value)
    // this.props
    //   .dispatch(
    //     fetchLoginAction({
    //       username: this.state.username.value,
    //       password: this.state.password.value
    //     })
    //   )
    //   .then(ret => {
    //     console.log(ret)
    //   })
    let ret = await loginApi({
      username: this.state.username.value,
      password: this.state.password.value
    })
    if (ret.code === 0) {
      // 登录成功后
      this.props.dispatch(setUserinfo(ret.data))
      // 跳转
      Toast.info('登录成功', 3, () => {
        this.props.history.replace('/')
      })
    } else {
      Toast.info(ret.msg, 3)
    }
  }

  render() {
    const { username, password } = this.state
    return (
      <div className='login'>
        <NavTab
          title='用户登录'
          leftText={<WuIcon type='icon-shouye' />}
          onLeftClick={() => {
            this.props.history.push('/')
          }}
        />
        <div className='avatar'>
          <img src='http://video.1314000.cn/face.png' />
        </div>
        <div className='form'>
          <List>
            <InputItem
              type='text'
              placeholder='请输入账号信息'
              error={username.error}
              onErrorClick={() => this.onErrorClick('username')}
              onChange={value => this.onChange('username', value)}
              value={username.value}
            >
              账号
            </InputItem>
          </List>
          <List>
            <InputItem
              type='text'
              placeholder='请输入密码信息'
              error={password.error}
              onErrorClick={() => this.onErrorClick('password')}
              onChange={value => this.onChange('password', value)}
              value={password.value}
            >
              密码
            </InputItem>
          </List>
          <List className='btn'>
            <Button type='primary' onClick={this.doLogin}>
              登录
            </Button>
          </List>
        </div>
      </div>
    )
  }
}

export default Index
